@charset "utf-8";

/*
Normalize.css 使浏览器呈现所有 HTML 元素更加一致，并且符合现代 web 标准。Normalize.css 只作用于需要规范化的样式。
*/
@import url("https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css");

:root {
	--c-black: rgb(51, 51, 51);
	--c-text-1: #FFF;
	--c-white-1: #FFF;
	--c-white-2: #f1f1f1;
	--c-blue-1: #0036a0;
	--c-blue-2: #032a79;
	--c-blue-3: #012573;
	--c-blue-4: #0182d6;
	--c-red-1: #a00;
	--c-red-2: #c00;
	--c-red-3: #F00;

	font-size: 3vw;
	color: var(--c-black);
	background-color: var(--c-white-1);
}
body{
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fbg_w1180%2F00%2F01%2F17%2FmoPLcI7mKE.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655296967&t=d4941c189113b04797cb32d1b5a86005");
}
.container {
	width: 100%;
	min-height: 90vh;
	position: relative;
	background-image: linear-gradient(to bottom, var(--c-blue-2) 0, var(--c-blue-2) 10rem, var(--c-blue-4) 100vh);
	background-repeat: repeat-x;
	background-position: 0 0;
	overflow: hidden;
}


.container>header {
	width: 100%;
	height: 4.5rem;
	color: var(--c-text-1);
	text-align: center;
	line-height: 4.5rem;
	font-size: 1.6rem;
	letter-spacing: .5rem;
	overflow: hidden;
	position: relative;
	padding: 0;
	margin: 0;
	background-image: linear-gradient(45deg, var(--c-blue-3), var(--c-blue-1), var(--c-blue-3));
	box-shadow: 0 0 1rem var(--c-blue-3) inset;
}
.container>header>img {
	height: 1em;
	margin-right: .3em;
	transform: translateY(.25rem);
}

.back {
	position: absolute;
	cursor: pointer;
	width: 1em;
	z-index: 2;
}

.back::before {
	content: "〈";
	cursor: pointer;
}

.table {
	width: 100%;
	border-spacing: 0;
	background-color: var(--c-white-1);
}

.table td,
.table th {
	text-align: center;
	border-right: solid .1rem var(--c-blue-1);
	padding: .7rem .5rem;
	position: relative;
}

.table td:last-child,
.table th:last-child {
	border-right: none;
}

.table>thead th {
	background-color: var(--c-blue-1);
	color: var(--c-text-1);
	font-size: 1.2rem;
	padding: 1rem 0.5rem;
}
.table-1>thead th {
	background-color: var(--c-white-2);
	color: var(--c-blue-3);
	font-size: 1.2rem;
	padding: 1rem 0.5rem;
}

.table td:nth-child(2) {
	text-align: left;
}


.table-1 td:nth-child(2) {
	text-align: center;
}

.table>tbody>tr:nth-child(2n) {
	background-color: var(--c-white-2);
}

.table>thead th svg {
	position: absolute;
	top: 0;
	left: .7rem;
	width: 2.5rem;
	height: 2.5rem;
}

.table>tbody img {
	height: 1.2rem;
	line-height: 1.2rem;
	display: inline-block;
	vertical-align: middle;
}

/* 排名计数器 */
.table>tbody>tr {
	counter-increment: count;
}

.table>tbody>tr>td:nth-child(1)::before {
	content: counter(count);
}

.table>tbody>tr:nth-child(1) {
	color: var(--c-red-1);
	font-weight: bold;
}

.table>tbody>tr:nth-child(2) {
	color: var(--c-red-2);
	font-weight: bold;
}

.table>tbody>tr:nth-child(3) {
	color: var(--c-red-3);
	font-weight: bold;
}

.table a {
	text-decoration: none;
	color: inherit;
}


.tab {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	background-color: var(--c-blue-1);
	color:var(--c-text-1);
	height: 4rem;
	border-bottom: solid var(--c-text-1) .3rem;
	position: relative;
	
}

.title {
	background-color: var(--c-blue-1);
	color:var(--c-text-1);
	height: auto;
	border-bottom: solid var(--c-text-1) .3rem;
	margin: 0;
	padding: .5rem;
	font-size: 1.2rem;
	text-align: center;
	line-height: 1.5;
}
.title-1 {
	background-color: var(--c-blue-1);
	color:var(--c-text-1);
	height: auto;
	border-top: solid var(--c-text-1) .3rem;
	margin: 0;
	padding: .5rem;
	font-size: 1.2rem;
	text-align: center;
	line-height: 1.5;
}
/*.tab::before {*/
/*	position: absolute;*/
/*	content: "";*/
/*	width: 5rem;*/
/*	height: .3rem;*/
/*	background-color: var(--c-red-3);*/
/*	bottom: -.3rem;*/
/*	transition: all .5s;*/
/*}*/

.tab.tab-1::before {
	left: 3rem;
}
.tab.tab-2::before {
	left: 15rem;
}
.tab.tab-3::before {
	left: 26rem;
}
.tab > div {
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 4rem;
	padding-left: 3rem;
	position: relative;
	cursor: pointer;
}
.tab > div>svg {
	position: absolute;
	top:0;
	width: 3rem;
	height: 3rem;
	margin-left: -3rem;
}

.tab-body {
	margin: 1rem;
	min-height: calc(100vh - 10.8rem);
	background-color: var(--c-white-1);
	overflow: hidden;
	border-radius: .5rem;
}

.table-1>tbody>tr>td:nth-child(1)::before {
	content: none;
}

.table-1>tbody>tr:nth-child(1) {
	color: inherit;
	font-weight: normal;
}

.table-1>tbody>tr:nth-child(2) {
	color: inherit;
	font-weight: normal;
}

.table-1>tbody>tr:nth-child(3) {
	color: inherit;
	font-weight: normal;
}
.tab-body p {
	text-indent: 2em;
}

@media screen and (min-width:780px) {
	.container {
		width: 780px;
		margin: 0 auto;
	}

	:root {
		font-size: 23.4px;
		/* 780/100*3 */
	}
}
